<!DOCTYPE html>
<html>
<head>
    <title>目录树结构展示</title>
    <link rel="stylesheet" type="text/css" href="category_tree.css">
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<body>
    <div class="category-container">
        <div class="category-tree">
            <ul class="category-list">
                <li class="category-item" data-index="1">
                    <a href="#">家用电器</a>
                </li>
                <li class="category-item" data-index="2">
                    <a href="#">手机</a> /
                    <a href="#">运营商</a> /
                    <a href="#">数码</a>
                </li>
                <li class="category-item" data-index="3">
                    <a href="#">电脑</a> /
                    <a href="#">办公</a>
                </li>
                <li class="category-item" data-index="4">
                    <a href="#">家居</a> /
                    <a href="#">家具</a> /
                    <a href="#">家装</a> /
                    <a href="#">厨具</a>
                </li>
                <li class="category-item" data-index="5">
                    <a href="#">男装</a> /
                    <a href="#">女装</a> /
                    <a href="#">童装</a> /
                    <a href="#">内衣</a>
                </li>
                <li class="category-item" data-index="6">
                    <a href="#">美妆</a> /
                    <a href="#">个护清洁</a> /
                    <a href="#">宠物</a>
                </li>
                <li class="category-item" data-index="7">
                    <a href="#">女鞋</a> /
                    <a href="#">箱包</a> /
                    <a href="#">钟表</a> /
                    <a href="#">珠宝</a>
                </li>
                <li class="category-item" data-index="8">
                    <a href="#">男鞋</a> /
                    <a href="#">运动</a> /
                    <a href="#">户外</a>
                </li>
                <li class="category-item" data-index="9">
                    <a href="#">房产</a> /
                    <a href="#">汽车</a> /
                    <a href="#">汽车用品</a>
                </li>
                <li class="category-item" data-index="10">
                    <a href="#">母婴</a> /
                    <a href="#">玩具乐器</a>
                </li>
                <li class="category-item" data-index="11">
                    <a href="#">食品</a> /
                    <a href="#">酒类</a> /
                    <a href="#">生鲜</a> /
                    <a href="#">特产</a>
                </li>
                <li class="category-item" data-index="12">
                    <a href="#">艺术</a> /
                    <a href="#">礼品鲜花</a> /
                    <a href="#">农资绿植</a>
                </li>
                <li class="category-item" data-index="13">
                    <a href="#">医药保健</a> /
                    <a href="#">计生情趣</a>
                </li>
                <li class="category-item" data-index="14">
                    <a href="#">图书</a> /
                    <a href="#">文娱</a> /
                    <a href="#">教育</a> /
                    <a href="#">电子书</a>
                </li>
                <li class="category-item" data-index="15">
                    <a href="#">机票</a> /
                    <a href="#">酒店</a> /
                    <a href="#">旅游</a> /
                    <a href="#">生活</a>
                </li>
                <li class="category-item" data-index="16">
                    <a href="#">旅游</a> /
                    <a href="#">众筹</a> /
                    <a href="#">白条</a> /
                    <a href="#">保险</a>
                </li>
                <li class="category-item" data-index="17">
                    <a href="#">安装</a> /
                    <a href="#">维修</a> /
                    <a href="#">清洗</a> /
                    <a href="#">二手</a>
                </li>
                <li class="category-item" data-index="18">
                    <a href="#">工业品</a>
                </li>
            </ul>   
        </div>
        <div class="category-detail" id="category-detail" >
            <ul class="category-detail-type">
                <li class="category-detail-type-item">男装<span class="iconfont" style="margin-left: 6px;">&#xe603;</span></li>
                <li class="category-detail-type-item">女装<span class="iconfont" style="margin-left: 6px;">&#xe603;</span></li>
            </ul>
            <div>
            <dl>
                <dt>男装<span class="iconfont">&#xe603;</span></dt>
                <dd>
                    <ul>
                        <li class="category-detail-item">当季热卖</li>
                        <li class="category-detail-item">精品推荐</li>
                    </ul>
                </dd>
            </dl>
            </div>
            <div>
            <dl>
                <dt>男装<span class="iconfont">&#xe603;</span></dt>
                <dd>
                    <ul>
                        <li class="category-detail-item">当季热卖</li>
                        <li class="category-detail-item">精品推荐</li>
                    </ul>
                </dd>
            </dl>
            </div>
        </div>
    </div>

    <script src="category_data.js"></script>
    <script src="category_tree.js"></script>
</body>
</html>